
<template>
  <div class="main">
    <div>
      <van-sticky>
        <div class="imgItem">
          <van-image round width="10rem" height="10rem" :src="getImageUrl" />
          <div class="username">{{ detail.info.name }}</div>
        </div>
      </van-sticky>
      <div>
        <div class="zbIiem">
          <div class="ItemName">装备</div>
          <van-row gutter="10">
            <van-col :span="12" class="card_left"
              ><div>
                武器：<span>{{ getBasicName(detail.equip.wq) }}</span>
              </div>
              <div v-html="getBasic(detail.equip.wq)"></div>
            </van-col>
            <van-col :span="12" class="card_right">
              <div>
                防具：<span>{{ getBasicName(detail.equip.fj) }}</span>
              </div>
              <div v-html="getBasic(detail.equip.fj)"></div>
            </van-col>
          </van-row>
          <van-row gutter="10">
            <van-col span="12" class="card_left">
              <div>
                上衣：<span>{{ getBasicName(detail.equip.sy) }}</span>
              </div>
              <div v-html="getBasic(detail.equip.sy)"></div>
            </van-col>
            <van-col span="12" class="card_right">
              <div>
                下衣：<span>{{ getBasicName(detail.equip.xy) }}</span>
              </div>
              <div v-html="getBasic(detail.equip.xy)"></div>
            </van-col>
          </van-row>
          <van-row gutter="10">
            <van-col :span="12" class="card_left">
              <div>
                鞋子：<span>{{ getBasicName(detail.equip.xz) }}</span>
              </div>
              <div v-html="getBasic(detail.equip.xz)"></div>
            </van-col>
            <van-col :span="12" class="card_right">
              <div>
                玉佩：<span>{{ getBasicName(detail.equip.yp) }}</span>
              </div>
              <div v-html="getBasic(detail.equip.yp)"></div>
            </van-col>
          </van-row>
          <van-row gutter="10">
            <van-col :span="12" class="card_left">
              <div>
                戒指：<span>{{ getBasicName(detail.equip.jz) }}</span>
              </div>
              <div v-html="getBasic(detail.equip.jz)"></div>
            </van-col>
            <van-col :span="12" class="card_right">
              <div>
                耳环：<span>{{ getBasicName(detail.equip.eh) }}</span>
              </div>
              <div v-html="getBasic(detail.equip.eh)"></div
            ></van-col>
          </van-row>
        </div>
        <div class="roles">
          <div>基本信息</div>
          <div>
            <van-row gutter="10">
              <van-col :span="12"
                >境界：{{ getRealmInfo(detail.info.realm) }}({{ getSpeed() }})</van-col
              >
              <van-col :span="12">心法：{{ detail.info.Skills }}</van-col>
            </van-row>

            <van-row gutter="10">
              <van-col :span="12">灵根：{{ detail.info.bodys }}</van-col>

              <van-col :span="12">幸运：{{ detail.info.fortune }}</van-col>
            </van-row>
            <van-row gutter="10">
              <van-col :span="12">生命值：{{ detail.info.HP }}</van-col>
              <van-col :span="12">法力：{{ detail.info.Mana }}</van-col>
            </van-row>
            <van-row gutter="10">
              <van-col :span="12">攻击力：{{ detail.info.aggressivity }}</van-col>
              <van-col :span="12">防御力：{{ detail.info.defense }}</van-col>
            </van-row>
          </div>
        </div>
      </div>
    </div>
    <navBarItem />
  </div>
</template>
<script setup lang="ts">
import navBarItem from '@/components/tabber.vue'
import { ref, reactive, onMounted, nextTick } from 'vue'
import { getAssetURL, equipFindOne, getRealm } from '@/utils/index.ts'
import useUserStore from '@/store/modules/user'

// import { nextTick } from 'process'
const active = ref<number>(0)
const detail = reactive<any>({
  equip: {},
  info: {}
})
const getImageUrl = ref<any>('')
onMounted(() => {
  getImageUrl.value = getAssetURL('user/4.jpg')
  if (localStorage.getItem('user-equip')) {
  } else {
    detail.equip = {
      wq: 'wq1001',
      fj: 'wq1002',
      sy: 'wq1003',
      xy: 'wq1004',
      xz: 'wq1005',
      yp: 'wq1006',
      jz: 'wq1007',
      eh: 'wq1008'
    }
  }
  detail.info=useUserStore().info
  detail.info.name=useUserStore().name


  // if (localStorage.getItem('user-info')) {
  //   detail.info = JSON.parse(localStorage.getItem('user-info'))
  // } else {
  //   detail.info = {
  //     name: useUserStore().name,
  //     aggressivity: '40',
  //     HP: '300',
  //     defense: '45',
  //     Mana: '300',
  //     speed: '20',
  //     realm: '1', //境界
  //     experience: '40000',
  //     need: '400000',
  //     bodys: '2',
  //     fortune: '30',
  //     Skills: '太极神功',
  //     SkillsInfo1: {
  //       Name1: '太极神功',
  //       value: 1.5,
  //       type: 'aggressivity'
  //     },
  //     SkillsInfo2: {
  //       Name1: '五岳剑法',
  //       value: 30,
  //       type: 'aggressivity'
  //     },
  //     SkillsInfo3: {
  //       Name1: '旋风斩',
  //       value: 35,
  //       type: 'aggressivity'
  //     },
  //     SkillsInfo4: {
  //       Name1: '疾风剑法',
  //       value: 80,
  //       type: 'aggressivity'
  //     }
  //   }
  //   localStorage.setItem('user-info', JSON.stringify(detail.info))
  // }
})
const getBasic = (value: String) => {
  let data = equipFindOne(value, 'equip')
  let html = ``
  if (data) {
    if (data.effect) {
      const effectKeys = Object.keys(data.effect)
      effectKeys.forEach((key) => {
        const value = data.effect[key]
        html += `<div>${
          key == 'aggressivity'
            ? '攻击力'
            : key == 'HP'
            ? '气血'
            : key == 'defense'
            ? '防御力'
            : key == 'Mana'
            ? '法力'
            : key == 'speed'
            ? '攻速'
            : key == 'fortune'
            ? '幸运'
            : ''
        }: ${value}</div>`
      })
    }
  }
  return html
}
const getSpeed = () => {
  return 100 * (Number(detail.info.experience) / Number(detail.info.need)) + '%'
}
const getRealmInfo = (value: any) => {
  return getRealm(value)
}
const getBasicName = (value: String) => {
  let data = equipFindOne(value, 'equip')
  if (data) {
    return data.name
  }
}
</script>
<style lang="scss" scoped>
.main {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 50px;
  .imgItem {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ecf6ff;
    position: relative;
  }
  .zbIiem {
    margin-top: 10px;
    .ItemName {
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      background: #fff;
    }
    .card_right {
      height: 130px;
      background: #fff;
      padding: 0 10px;
      border: 1px solid #f5f5f5;
    }
    .card_left {
      height: 130px;
      padding: 0 10px;
      border: 1px solid #f5f5f5;
      background: #fff;
    }
  }
  .roles {
    padding: 5px 10px;
    margin-top: 5px;
    background: #fff;
  }
  .username {
    position: absolute;
    bottom: 0px;
    color: #1890ff;
  }
}
</style>